<template>
  <view class="page-main">
    <view class="wrap">
      <!--			选项卡START -->
      <view class="u-tabs-box">
        <u-tabs-swiper
          activeColor="#004fbf"
          ref="tabs"
          :list="list"
          :current="current"
          @change="change"
          :is-scroll="false"
          swiperWidth="750"
        ></u-tabs-swiper>
      </view>
      <!--			选项卡END  -->
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <!--	 一个tab START 			-->
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <view class="page-box">
              <view v-for="(order,index) in orderList"
                :key="index"
              >
                <o-card
                  @toCheck="checkForDetails(order, 1)"
                  :order="order"
                  :key="order.id"
                ></o-card>
              </view>
            </view>
            <uni-load-more
              class="loadMore"
              :status="status"
              :icon-size="12"
              :content-text="contentText"
            />
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%; width: 100%">
            <view class="page-box">
              <view v-for="(order,index) in orderList2" :key="index">
                <o-card
                  @toCheck="checkForDetails(order, 2)"
                  :order="order"
                  :key="order.id"
                ></o-card>
              </view>
            </view>
            <uni-load-more
              class="loadMore"
              :status="status"
              :icon-size="12"
              :content-text="contentText"
            />
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import sHouseCard from '../../components/sHouseCard';
import { tokenRequest } from '../../util/network';
import { ROUTER_OBJ, uniNavigate } from '../../util/misc';
import { getTimeFromString, uniSetStorageSync } from '../../util/funcs';
import oCard from './oCard';
import { filter } from '../../util/reuse/filter';

export default {
  mixins: [filter],
  filters: {
    calculateOrderStatus(val) {
      switch (val) {
        case 0:
          return '待处理';
          break;
        case 1:
          return '已完成';
          break;
        case 2:
          return '已关闭';
          break;
        default:
          return '待沟通';
      }
    },
  },
  data() {
    return {
      status: 'nomore', // 与下面一一对应
      contentText: {
        contentdown: '上拉加载更多', // more
        contentrefresh: '加载中', // loading
        contentnomore: '没有更多', // nomore
      },
      status2: 'more', // 与下面一一对应
      contentText2: {
        contentdown: '上拉加载更多', // more
        contentrefresh: '加载中', // loading
        contentnomore: '没有更多', // nomore
      },
      pagi: {
        // pagi 需要根据自己的需要 在vue组件里面定义
        page: 1,
        pageSize: 3,
      },
      pagi2: {
        page: 1,
        pageSize: 3,
      },
      userToken: '',
      list: [{ name: '意向书订单' }, { name: '合同订单' }],
      orderList: [], // 合同订单
      orderList2: [], // 意向书订单
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      // houseType: 1, //  1 出租 2 出售
      loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
    };
  },
  components: { sHouseCard, oCard },
  computed: {
    // 价格小数
    priceDecimal() {
      return (val) => {
        if (val !== parseInt(val)) return val.slice(-2);
        else return '00';
      };
    },
    // 价格整数
    priceInt() {
      return (val) => {};
    },
  },
  methods: {
    washData(arr) {
      for (let i = 0, len = arr.length; i < len; i++) {
        let item = arr[i];
        let time = this.getTimeFromStamp(item.create_time);
        let t = getTimeFromString(time);
        this.$set(item, 'date', t[0]);
        this.$set(item, 'time', ''); // 先不显示时间
        // this.$set(item, 'time', t[1])
        arr[i] = item;
      }
    },
    checkForDetails(order, type) {
      let opt = {
        ...order,
        type_id: type,
      };
      uniSetStorageSync(ROUTER_OBJ, opt);
      // console.log('opt: ',opt)
      // return
      uniNavigate('/order/orderDetail');
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
      // this.getListData(index);
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
  },
  mounted() {
    tokenRequest(
      '/order',
      {},
      {
        success: ({ data }) => {
          // console.log(data)
          let list1 = data.data.letter;
          let list2 = data.data.contract;
          this.orderList = list1;
          this.orderList2 = list2;
          this.washData(this.orderList);
          this.washData(this.orderList2);
        },
      }
    );
  },
};
</script>

<style>
.page {
  height: 100%;
  background-color: #f2f2f2;
}
</style>

<style lang="scss" scoped>
@import '../../assets/styles/global';

.page-main {
  height: 100vh;
  background-color: $greyBackgroundColor;
  overflow: hidden;

  .wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--window-top));
    width: 100%;
  }

  .swiper-box {
    flex: 1;
    background-color: $greyBackgroundColor;
    @include center;
    flex-direction: column;

    .page-box {
    }
  }

  .swiper-item {
    height: 100%;

  }
}
</style>
